<template>
  <FormItem
    v-bind="formItemProps"
    :class="[
      'form-radio-group',
      { 'form-radio-group-row': fillRow, inline },
      ellipsis ? 'form-radio-group-row-ellipsis' : 'form-radio-group-row-break-word'
    ]"
    :rules="computeRules"
    :disabled="inputDisabled">
    <template #default>
      <ElRadioGroup
        :class="{ 'over-flow': overFlow }"
        :value="value"
        v-bind="inputProps"
        :disabled="inputDisabled"
        :placeholder="computePlaceholder"
        v-on="listeners"
        @input="val => $emit('input', val)">
        <template v-if="allowCancel">
          <Component
            :is="component"
            v-for="item in innerOptions"
            :key="item[valueKey]"
            :label="item[valueKey]"
            @click.prevent.stop.native="toggle(item)">
            {{ item[labelKey] }}
          </Component>
        </template>
        <template v-else>
          <Component :is="component" v-for="item in innerOptions" :key="item[valueKey]" :label="item[valueKey]">
            {{ item[labelKey] }}
          </Component>
        </template>
      </ElRadioGroup>
      <slot name="append"></slot>
    </template>
    <template #error="{ error }">
      <slot name="error" :error="error"></slot>
    </template>
    <template #label>
      <slot name="label"></slot>
    </template>
    <template #below>
      <slot name="below"></slot>
    </template>
  </FormItem>
</template>

<script>
  import formInput from './form-input'
  import formPick from '@/components/form/form-pick'
  import { RadioGroup } from 'element-ui'
  import { filterProperties, normalizeProps } from '@/util'
  import dictionary from '@/vue/mixin/dictionary'

  const autoBindKeys = Object.keys(RadioGroup.props).filter(key => !['value', 'placeholder', 'disabled'].includes(key))

  export default {
    name: 'FormRadioGroup',
    mixins: [formInput, formPick, dictionary],
    props: {
      options: {
        type: Array,
        default: () => []
      },
      gender: Boolean,
      overFlow: Boolean,
      confirm: Boolean,
      labelProp: {
        type: String,
        default: 'name'
      },
      valueProp: {
        type: String,
        default: 'code'
      },
      english: Boolean,
      chinese: Boolean,
      typing: Boolean,
      classic: {
        type: Boolean,
        default: true
      },
      fillRow: Boolean,
      ellipsis: Boolean,
      inline: Boolean,
      allowCancel: Boolean,
      radioType: {
        type: String,
        default: 'radio'
      }
    },
    computed: {
      component() {
        return this.radioType === 'radio' ? 'ElRadio' : 'ElRadioButton'
      },
      prefix() {
        return '请选择'
      },
      inputProps() {
        return filterProperties({ ...normalizeProps(this.$attrs), ...this.$props }, autoBindKeys)
      },
      labelKey() {
        return this.classic ? 'label' : this.labelProp
      },
      valueKey() {
        return this.classic ? 'value' : this.valueProp
      },
      innerOptions() {
        if (this.dictType) {
          return this.dictItems
        }
        if (this.gender) {
          return [
            {
              [this.labelKey]: '男',
              [this.valueKey]: this.chinese ? '男' : this.typing ? 1 : '1'
            },
            {
              [this.labelKey]: '女',
              [this.valueKey]: this.chinese ? '女' : this.typing ? 2 : '2'
            }
          ]
        }
        if (this.confirm) {
          return [
            {
              [this.labelKey]: '是',
              [this.valueKey]: this.chinese ? '是' : this.english ? 'Y' : this.typing ? 1 : '1'
            },
            {
              [this.labelKey]: '否',
              [this.valueKey]: this.chinese ? '否' : this.english ? 'N' : this.typing ? 0 : '0'
            }
          ]
        }
        return this.options
      }
    },
    methods: {
      emitInput(val) {
        this.$emit('input', val)
      },
      toggle(item) {
        if (this.value === item[this.valueKey]) {
          this.emitInput(null)
        } else {
          this.emitInput(item[this.valueKey])
        }
      }
    }
  }
</script>

<style lang="scss">
  .form-radio-group {
    &.inline {
      display: inline;

      .el-radio {
        float: left;
        margin-right: 10px;
      }
    }

    .el-form-item__content {
      line-height: normal;
    }

    &.form-radio-group-row {
      &.form-radio-group-row-ellipsis {
        .el-radio__label {
          @include ellipsis-line;
        }
      }

      &.form-radio-group-row-break-word {
        .el-radio__label {
          @include break-word;
        }
      }

      .el-radio-group {
        display: block;
      }

      .el-radio {
        @include flex-row;
        flex-wrap: nowrap;
        width: 100%;
      }

      .el-radio__input {
        @include flex-not-shrink;
        top: 3px;
      }

      .el-radio__label {
        @include flex-item;
        display: block;
        margin-bottom: 6px;
        padding-left: 4px;
        vertical-align: sub;
      }
    }

    .el-radio-group {
      // inherit 导致比elInput高了1.7167px
      line-height: 1;
    }

    .el-radio {
      margin-right: 10px;
      vertical-align: middle;
    }

    .el-radio__label {
      padding-left: 0;
      line-height: 19px;
    }
  }
</style>
